<!-- templates/recipe.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ recipe_title }}</title>
  <link rel="stylesheet" href="https://flavorsomerecipes.com{{ url_for('static', filename='styles.css') }}">
  <link rel="stylesheet" href="https://flavorsomerecipes.com{{ url_for('static', filename='header.css') }}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="shortcut icon" href="{{ url_for('static', filename='favorites.icon') }}" type="image/x-icon">
  <script type="module" src="https://md-block.verou.me/md-block.js"></script>
  <script>
      var _hmt = _hmt || [];
      (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?38fcc093c940c38c72f6ed7e10f47097";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
      })();
  </script>
  <script type="text/javascript" charset="utf-8">
  function init() {
    const thumbnailList = document.querySelector('.thumbnail-list');
    const arrowLeft = document.getElementById("arrow left");
    const arrowRight = document.getElementById("arrow right");
    let translateX = 0;
    function moveList(direction) {
        console.log({{ translateX }});
        if (direction === 'left' && translateX <= -100) {
            if (translateX <= -100) {translateX += 100;}
            else {translateX = 0;}
        } else if (direction === 'right' && translateX >= -{{ pics|length }}*78 + 100) {
            if (translateX >= -{{ pics|length }}*78 + 100) {translateX -= 100;}
            else {translateX = -{{ pics|length }}*78;}
        }
        thumbnailList.style.transform = `translateX(${translateX}px)`;
    }
    {% if pics|length >= 5 %}
        arrowLeft.addEventListener('click', () => moveList('left'));
        arrowRight.addEventListener('click', () => moveList('right'));
    {% else %}
        arrowLeft.style.display = 'none';
        arrowRight.style.display = 'none';
    {% endif %}
  }
  </script>
</head>
<body class="kitchen-style" onload='init()'>
    {% include 'header.html' %}
    <div class="recipe-container">
        <h1>{{ recipe_title }}</h1>
        <div class="header-image-container">
            <a href="https://flavorsomerecipes.com{{ pics_head }}">
                <img src="https://flavorsomerecipes.com{{ pics_head }}" alt="{{ recipe_title }}" class="header-large-image">
            </a>
            <!-- 小图列表 -->
            <div class="thumbnail-container">
                <button class="arrow left" id='arrow left'>←</button>
                <div class="thumbnail-list">
                    {% for pic in pics %}
                    <div class="thumbnail-item">
                    <a href="https://flavorsomerecipes.com{{ pic }}">
                        <img src="https://flavorsomerecipes.com{{ pic }}" alt="{{ recipe_title }}" class="thumbnail-image">
                    </a>
                    </div>
                    {% endfor %}
                </div>
                <button class="arrow right" id='arrow right'>→</button>
            </div>
        </div>
        <div class="markdown-content">
            {{ content|safe }}
        </div>
    </div>
    {% include 'footer.html' %}
    <script src="/static/recipes.js"></script>
</body>
</html>
